<template>
  <div class="app-container flex1 flex-col over-hidden product-property-list">
    <el-form class="flex-shrink-0">
      <el-form
        class="flex-shrink-0"
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="100px"
      >
        <el-form-item label="计划编号" prop="planCode">
          <el-input
            v-model="queryParams.planCode"
            placeholder="请输入计划编号"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="计划名称" prop="planName">
          <el-input
            v-model="queryParams.planName"
            placeholder="请输入计划名称"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="queryParams.status"
            placeholder="请选择状态"
            clearable
            size="small"
            style="width: 240px"
          >
            <el-option
              v-for="status in statusArr"
              :key="status.dictValue"
              :label="status.dictLabel"
              :value="status.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
          >
            查询
          </el-button>
          <el-button
            icon="el-icon-refresh"
            size="mini"
            @click="resetQuery('queryForm')"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-form>

    <!-- 剩余空间通过 flex1 全部分给表格，over-hidden 必须使用 -->
    <div class="flex1 over-hidden">
      <el-table
        :data="tableData"
        height="100%"
        v-loading="loading"
      >
        <el-table-column
          align="center"
          label="序号"
          prop="serialNumber"
        ></el-table-column>

        <el-table-column
          align="center"
          label="计划编号"
          prop="planCode"
        ></el-table-column>

        <el-table-column
          align="center"
          label="计划名称"
          prop="planName"
        ></el-table-column>

        <el-table-column
          align="center"
          label="申报单位"
          prop="declareCompany"
        ></el-table-column>

        <el-table-column
          align="center"
          label="采购商"
          prop="purchaser"
        ></el-table-column>

        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            <span> {{ scope.row.status | dictFilter(statusArr) }}</span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="创建时间"
          prop="createTime"
        ></el-table-column>

        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="toOrderDetail(scope.row)"
              >详情
            </el-button>
            <el-button
              type="primary"
              size="small"
              @click="toDelivery(scope.row)"
              >发货
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination
      class="text-center bgfff pd10 flex-shrink-0"
      layout="total, sizes, prev, pager, next, jumper"
      :current-page.sync="pageNum"
      :page-sizes="[10, 20, 30, 50]"
      :page-size.sync="pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="total"
    >
    </el-pagination>
    <el-dialog
      width="85%"
      custom-class="max-w-1200"
      :closeOnClickModal="false"
      destroy-on-close
      @close="closeDialog"
      :visible.sync="showOrderDetail">
      <order-detail
        :orderData="orderData"
        @close="showOrderDetail = false;"
        v-if="orderData">
      </order-detail>
    </el-dialog>
    <el-dialog
      title="发货"
      width="85%"
      custom-class="max-w-1200"
      :closeOnClickModal="false"
      destroy-on-close
      @close="closeDialog"
      :visible.sync="showDeliveryForm">
      <delivery-form
        :orderData="orderData"
        from="order-list"
        @close="showDeliveryForm = false;"
        v-if="orderData">
      </delivery-form>
    </el-dialog>
  </div>
</template>

<script>
import { tableMixin } from "@/mixins/index";
import { dictFilter } from "@/utils/filters/common";
import orderDetail from "@/views/components/order-detail/order-detail.vue"
import deliveryForm from "@/views/components/delivery-form/delivery-form.vue"
export default {
  mixins: [ tableMixin ],
  filters: { dictFilter },
  components: {
    'order-detail': orderDetail,
    'delivery-form': deliveryForm
  },
  data() {
    return {
      total: 0,
      tableData: [
        {
          serialNumber: "1", // 序号
          planCode: "cgjh00001", // 计划编号
          planName: "XXXX采购计划表", // 计划名称
          declareCompany: "XXX有限公司", // 申报单位
          purchaser: "XXX公司", // 采购商
          status: "01", // 状态
          createTime: "2022-04-15 12:00:00", // 创建时间
          projectName: "深圳湾一号", // 项目名称
          planTotal: '10000', // 钢材总量计划
          grossArea: '10000', // 建筑面积（M）
        },
        {
          serialNumber: "2", // 序号
          planCode: "cgjh00001", // 计划编号
          planName: "XXXX采购计划表", // 计划名称
          declareCompany: "XXX有限公司", // 申报单位
          purchaser: "XXX公司", // 采购商
          status: "02", // 状态
          createTime: "2022-04-15 12:00:00", // 创建时间
          projectName: "深圳湾二号", // 项目名称
          planTotal: '10000', // 钢材总量计划
          grossArea: '12000', // 建筑面积（M）
        },
        {
          serialNumber: "3", // 序号
          planCode: "cgjh00001", // 计划编号
          planName: "XXXX采购计划表", // 计划名称
          declareCompany: "XXX有限公司", // 申报单位
          purchaser: "XXX公司", // 采购商
          status: "03", // 状态
          createTime: "2022-04-15 12:00:00", // 创建时间
          projectName: "深圳湾三号", // 项目名称
          planTotal: '18000', // 钢材总量计划
          grossArea: '20000', // 建筑面积（M）
        }
      ],
      loading: false,
      statusArr: [
        {
          dictValue: "01",
          dictLabel: "待处理",
        },
        {
          dictValue: "02",
          dictLabel: "已处理",
        },
        {
          dictValue: "03",
          dictLabel: "已完结",
        }
      ],
      queryParams: {
        planCode: "",
        planName: "",
        status: "",
      },
      orderData: null,
      showOrderDetail: false,
      showDeliveryForm: false,
    };
  },
  created() {},
  computed: {
    // tableData() {
    //   return this.$store.state.products.propertyList;
    // },
  },
  methods: {
    getList() {},
    closeDialog(){
      this.orderData = null;
    },
    toOrderDetail(orderData){
      this.orderData = orderData;
      this.showOrderDetail = true;
    },
    toDelivery(orderData){
      this.orderData = orderData;
      this.showDeliveryForm = true;
    }
  },
};
</script>

<style scoped lang="scss">
.product-property-list {
  height: 100%;
  .opt-btn {
    padding: 20px;
  }
  .update-btn {
    padding-top: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
